import { useState } from 'react'
// import reactLogo from './assets/react.svg'
// import viteLogo from '/vite.svg'
import './App.css'

import { useNavigate } from 'react-router-dom';


function HeritageCard({ model }) {
  const navigate = useNavigate();

  return (
    <div
      style={{
        display: 'flex',
        justifyContent: 'center',
        padding: '10px',
        // backgroundColor: '#f5f5f5',
        height: '26vh',
        fontSize: '14px',
        boxSizing: 'border-box',
      }}
    >
      <div
        style={{
          display: 'flex',
          flexDirection: 'row',
          backgroundColor: '#161616',
          borderRadius: '16px',
          boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
          overflow: 'hidden',
          width: '100vh',
          // minHeight: '260px',
        }}
      >
        {/* 左侧区域 */}
        <div
          style={{
            width: '70%',
            padding: '20px',
            // borderRight: '1px solid #eee',
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'space-between',
          }}
        >
          <div style={{fontSize: '20px', fontWeight: 'bold', marginBottom: '12px', display: 'flex', justifyContent: 'space-between'}}>
            <div>🏛️ {model.name}</div>
            <button
              style={{
                fontSize: '14px',
                alignSelf: 'flex-start',
                padding: '6px 12px',
                backgroundColor: '#007bff',
                color: 'white',
                border: 'none',
                borderRadius: '6px',
                cursor: 'pointer',
              }}
              onClick={() => navigate(model.navigate)}
            >
              进入模型
            </button>
          </div>

          <div style={{display: 'flex', justifyContent: 'space-between', maxWidth: '100%'}}>
            {model.images.map((image) => (
              <img
                src={`/heritage/thumbnails/${image}`}
                alt={image}
                style={{
                  width: '32%',
                  height: '100%',
                  objectFit: 'cover',
                  display: 'block',
                }}
              />
            ))}
          </div>

        </div>

        {/* 右侧区域 */}
        <div
          style={{
            width: '30%',
            margin: '20px',
            marginLeft: '0',
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'space-between',
            overflow: 'hidden',
            textOverflow: 'ellipsis',
            boxSizing: 'border-box',  // ✅ padding计算在内
          }}
        >
          <p style={{margin: 0, fontSize: '14px', color: '#989898', lineHeight: '1.6'}}>
            {model.intro}
          </p>
        </div>
      </div>
    </div>
  );
}

function App() {
  const [count, setCount] = useState(0)
  const navigate = useNavigate();

  const data = {
    model1: {
      name: "南屏村孝思楼 (小洋楼)",
      images: ["scene1.png", "scene2.png", "scene3.png"],
      intro: "孝思楼，又名小洋楼，坐东朝西，建于清末，建成时一体四宅，有过街楼和连廊相连通，其建筑吸取罗马建筑中的半圆拱门和窗户形式，洋楼平面无明显轴线，为四层建筑。其一、二层采光多用窗户，三、四层由屋脊中央挑出楼梯。室内空间丰富，极少装饰。",
      navigate: "/heritage/model",
    },
    model2: {
      name: "南屏村程氏祠堂",
      images: ["scene4.png", "scene5.png", "scene6.png"],
      intro: "程氏宗祠建于清乾隆年间，约200年历史，在南屏村众多的祠堂当中以精湛的石雕艺术取胜。祠堂大门两侧各有一组由护栏、鼓座、石鼓的黟县青石雕，右侧由“三龙腾云”衬着石鼓，左侧是“五凤朝阳”托起石鼓，谓之“龙凤呈祥”，鼓座由两块长方形黟县青雕琢而成，刻有“高山流水”、“苍松飞鹤”、“亭台楼阁”、“宝塔城廓”等四幅山水画，鼓座下面完全是按照国画的格式来雕刻，除了玉瓶、宝鼎、青狮、白象外，还有题头、落款，并加以篆体印章；两边护栏上的“八骏”及“十鹿”图两块石雕1米多高，2米来长，石雕身上的梅斑、马鬓均清晰在目，可见当时徽州石雕工匠的技艺高超精湛。",
      navigate: "/heritage/model2",
    }
  }

  console.log("init app.jsx")

  return (
    <>
      {/*<div>*/}
      {/*  <a href="https://vite.dev" target="_blank">*/}
      {/*    <img src={viteLogo} className="logo" alt="Vite logo"/>*/}
      {/*  </a>*/}
      {/*  <a href="https://react.dev" target="_blank">*/}
      {/*    <img src={reactLogo} className="logo react" alt="React logo"/>*/}
      {/*  </a>*/}
      {/*</div>*/}
      {/*<h1>Vite + React</h1>*/}
      <h2 style={{fontSize: 30}}>建筑遗产档案数字化系统Demo 安徽省南屏村为例</h2>
      <div style={{
        marginTop: '-16px',
        marginBottom: '26px',
      }}>
        <p style={{color: "#989898"}}>合肥工业大学建筑与艺术学院 建筑遗产学 结课论文技术实验</p>
      </div>

      <HeritageCard model={data.model1}/>
      <HeritageCard model={data.model2}/>

      {/*<div className="card">*/}
      {/*  <button onClick={() => setCount((count) => count + 1)}>*/}
      {/*    count is {count}*/}
      {/*  </button>*/}
      {/*  <p>*/}
      {/*    Edit <code>src/App.jsx</code> and save to test HMR*/}
      {/*  </p>*/}
      {/*</div>*/}
      {/*<button onClick={() => navigate('/heritage/model')}>*/}
      {/*  demo1*/}
      {/*</button>*/}
      {/*<button onClick={() => navigate('/heritage/model2')}>*/}
      {/*  demo2*/}
      {/*</button>*/}
      {/*<p className="read-the-docs">*/}
      {/*  Click on the Vite and React logos to learn more*/}
      {/*</p>*/}

      {/*<div style={{*/}
      {/*  display: 'fixed',*/}
      {/*  width: '10%',*/}
      {/*  height: '10%',*/}
      {/*  bottom: '5%',*/}
      {/*  left: '5%',*/}
      {/*  background: '#fff',*/}
      {/*}}>*/}
      {/*  hello*/}
      {/*</div>*/}

      <div style={{
        color: '#989898',
        margin: '16px 0 0 0',
      }}>
        Made by ~ <b>伍余林翰</b> <a href={"mailto:2627205945@qq.com"}><b>2627205945@qq.com</b></a>
      </div>

    </>
  )
}

export default App
